$(function(){
    // 进入就渲染页面
    load()
    $("#addToLocal").on("keydown",function(e){
        if(e.keyCode==13){
            // 先获取本地存储的数据
            var local=getData()
            if($(this).val()!=""){
                // 把local数据进行更新，将数据追加到数组中
                local.push({title:$(this).val(),done:false})
                // 保存数据
                saveData(local)
                // 渲染页面
                load()
            }else{
                alert("请输入你想做的事情！")
            }
            $(this).val("")
        }
    })
    // 删除正在进行的事件
    $("ol,ul").on("click","a",function(){
        // 获取数据
        var local=getData()
        var i=$(this).attr("data-index")
        console.dir($(this));
        // 删除数据,采取重新赋值的方式
        local.splice(i,1)
        // 保存数据
        saveData(local)
        // 重新渲染
        load()
    })
    // 点击正在进行或者已经完成模块的对勾，将对钩事件移到已完成或正在进行模块中去
    $("ol,ul").on("click","input",function(e){
        // 获取数据
        var local=getData()
        var i=$(this).siblings("a").attr("data-index")
        // 修改数据
        local[i].done=$(this).prop("checked")
        // 保存数据
        saveData(local)
        // 重新渲染
        load()
    })
    // 获取本地存储的数据
    function getData(){
        var data=localStorage.getItem("todoList")
        if(data!=null){
            data=JSON.parse(data)
            return data
        }else{
            return []
        }
    }
    // 保存数据到localStorage
    function saveData(data){
        var data=JSON.stringify(data)
        localStorage.setItem("todoList",data)
    }
    // 加载页面
    function load(){
        // 获取本地存储数据
        var data=getData()
        // 统计每个模块中事件的个数
        var ingCount=0
        var doneCount=0
        // 遍历之前要将数据清空
        $("ol,ul").empty()
        // 遍历数据
        $.each(data,function(i,n){
            if(n.done){
                doneCount++
                $("ul").prepend("<li><i></i><div class='content'><input type='checkbox' id='check' checked='checked'><p>"+n.title+"</p><a href='javascript:;' class='iconfont' data-index="+i+">&#xe642;</a></div></li>")
            }else{
                ingCount++
                $("ol").prepend("<li><i></i><div class='content'><input type='checkbox' id='check'><p>"+n.title+"</p><a href='javascript:;' class='iconfont' data-index="+i+">&#xe642;</a></div></li>")
            }
        })
        $(".ing .content-head span").text(ingCount)
        $(".done .content-head span").text(doneCount)
    }
})